import React, { Component } from 'react';
import { Card, Row, Col, Modal, Form, Input, Button} from 'antd'
import { CheckCircleOutlined} from '@ant-design/icons';
import styles from '../style.less'
import method_RegExp from '@component/smartlab-login-component/method/resExp.js';
import { connect } from 'react-redux';
import * as actions from '@pages/Home/store/action';
import { IconFont } from '@utils/request';

class Index extends Component {
    state={
        modalVisable:false,
    }
    onFormCreateOk = (value) => {
        const obj = {
            oldPassword: value.oldPassword,
            password: value.password,
        }
        this.props.alterPassword(obj)
        this.setState({
            modalVisable: false,
        })
    }
    render() {
        return (
            <Card
                title={
                    <span>
                        <IconFont type="icon-zhongzhimima" style={{ fontSize: "20px", marginRight: '10px' }} />
                        重置密码
                    </span>
                }
                bordered={false}
                headStyle={{ fontSize: "13px" }}
            >
                <Row gutter={16} >
                    <Col span={20}>
                        <span style={{ fontSize: "10px" }}>安全性高的密码可以使帐号更安全。建议您定期更换密码，且长度超过6位。</span>
                    </Col>
                    <Col span={4}>
                        <span className={styles.one}>
                            <CheckCircleOutlined />
                            <span> 已设置</span>
                        </span>
                        <span > | </span>
                        <span className={styles.three} onClick={() => this.setState({ modalVisable: true })}>
                            修改
                        </span>
                    </Col>
                </Row>
                <Modal
                    title="重置密码"
                    centered
                    visible={this.state.modalVisable}
                    onCancel={() => this.setState({ modalVisable: false })}
                    closable={false}
                    footer={null}
                    width={500}
                    destroyOnClose={true}
                >
                    <Form
                        onFinish={this.onFormCreateOk}
                    >
                        <Form.Item
                            name={["oldPassword"]}
                            rules={[
                                { required: true, message: '旧密码不可为空！' },
                                { pattern: method_RegExp("chinese"), message: "密码中不可包含汉字" },
                                { min: 6, message: "密码长度最少为6位" },
                                { max: 18, message: "密码长度最多为18位" }
                            ]}
                        >
                            <Input.Password
                                placeholder='旧密码不可为空！'
                                
                                style={{
                                    marginBottom: "1vh",
                                    height: "5vh"
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                            name={['password']}
                            rules={[
                                { required: true, message: '请输入新密码' },
                                { pattern: method_RegExp("chinese"), message: "密码中不可包含汉字" },
                                { min: 6, message: "密码长度最少为6位" },
                                { max: 18, message: "密码长度最多为18位" }
                            ]}

                        >
                            <Input.Password
                                placeholder='新密码不可为空！'
                                style={{
                                    marginBottom: "1vh",
                                    height: "5vh"
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                            name={["okPassword"]}
                            rules={[
                                { required: true, message: '请确认您的新密码！' },
                                ({ getFieldValue }) => ({
                                    validator(rule, value) {
                                        if (!value || getFieldValue("password") === value) {
                                            return Promise.resolve();
                                        };
                                        return Promise.reject("新密码和确认密码不相同！")
                                    }
                                })
                            ]}
                        >
                            <Input.Password 
                                placeholder='请确认您的新密码！'
                                style={{
                                    marginBottom: "1vh",
                                    height: "5vh"
                                }}
                            />
                        </Form.Item>
                        <Form.Item >
                            <Button
                                type="primary"
                                htmlType="submit"
                                block
                                style={{
                                    borderRadius: "10px",
                                    color: "#fff",
                                    background: "rgb(81, 175, 230)",
                                    height: "5vh",
                                    marginBottom: "1vh",

                                }}
                            >提交</Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </Card>
        );
    }

}
const mapDispatchToProps = dispatch => ({
    //修改密码
    alterPassword(value) {
        dispatch(actions.alterPassword(value))
    },

})
export default connect(null, mapDispatchToProps)(Index);
